<template>
  <div class="main" @touchmove.stop="">
    <div class="puzzleMain" :style="puzzleStyle" ref="puzzleMain">
      <div class="close" @touchend.stop="closePuzzle"></div>
      <div>
        <div class="puzzleLeft" v-for="(leftItem,index) in item.pictureLeft" :key="index" :style="leftStyle(leftItem)"
          :ref="'puzzleLeft'+index" :class="{suc:leftItem.isSuc}"></div>
      </div>
      <div class="puzzleRight" v-for="(rightItem,index) in item.pictureRight" :key="index+100"
        :style="rightStyle(rightItem)" @touchstart.stop="start(rightItem,index,$event)"
        @touchmove.stop="move(rightItem,index,$event)" @touchend.stop="end(rightItem,index,$event)"></div>
    </div>
  </div>
</template>

<script>
import Vue from "vue"
import { mapActions } from "vuex"
export default {
  props: ["item", "index","isBreakLos","questionIndex"],
  data() {
    return {
      puzzleX: 0,
      puzzleY: 0,
      isFalse: false
    }
  },
  created() {
    this.item.pictureLeft.forEach(picture =>{
      this.$set(picture,'isBlank',false)
      this.$set(picture,'isFinish',false)
    })
    this.item.pictureRight.forEach(picture =>{
      this.$set(picture,'isBlank',false)
      this.$set(picture,'isFinish',false)
      this.$set(picture,'moveX',0)
      this.$set(picture,'moveY',0)
      this.$set(picture,'transition','all 0.5s')
    })
  },
  mounted() {
    //获取弹窗距离屏幕距离
    this.puzzleX = this.$refs.puzzleMain.getBoundingClientRect().left + (this.mainWidth - this.windowWidth) / 2
    this.puzzleY = this.$refs.puzzleMain.getBoundingClientRect().top + (this.mainHeight - this.windowHeight) / 2
  },
  computed: {
    puzzleStyle() {
      return {
        background: "url(" + this.item.popup.background + ")0 0/100% 100%",
        width: this.item.popup.width,
        height: this.item.popup.height,
        marginLeft: -parseFloat(this.item.popup.width) / 100 * this.mainWidth / 2 + "px",
        marginTop: -parseFloat(this.item.popup.height) / 100 * this.mainHeight / 2 + "px"
      }
    },
    leftStyle(item) {
      return function (item) {
        return {
          position: "absolute",
          background: "url(" + item.imageUrl + ")0 0/100% 100%",
          left: parseFloat(item.left) / 100 * this.mainWidth - this.puzzleX + "px",
          top: parseFloat(item.top) / 100 * this.mainHeight - this.puzzleY + "px",
          width: parseFloat(item.width) / 100 * this.mainWidth + "px",
          height: parseFloat(item.height) / 100 * this.mainHeight + "px",
          opacity: item.isFinish ? "1" : "0"
        }
      }
    },
    rightStyle(item) {
      return function (item) {
        return {
          position: "absolute",
          background: "url(" + item.imageUrl + ")0 0/100% 100%",
          left: parseFloat(item.left) / 100 * this.mainWidth - this.puzzleX + "px",
          top: parseFloat(item.top) / 100 * this.mainHeight - this.puzzleY + "px",
          width: parseFloat(item.width) / 100 * this.mainWidth + "px",
          height: parseFloat(item.height) / 100 * this.mainHeight + "px",
          transition: item.transition,
          zIndex: item.zIndex,
          transform: "translate3d(" + item.moveX + "px," + item.moveY + "px,0px)",
        }
      }
    }
  },
  methods: {
    //调用父组件方法关闭拼图窗口
    closePuzzle: function () {
      this.$parent.puzzleIsShow()
    },
    start: function (rightItem, index, event) {
      rightItem.y = event.changedTouches[0].clientY
      rightItem.x = event.changedTouches[0].clientX
      rightItem.zIndex = 99
      Vue.set(this.item.pictureRight, index, rightItem)
    },
    move: function (rightItem, index, event) {
      rightItem.transition = "all 0s"
      rightItem.moveX = event.changedTouches[0].clientX - rightItem.x
      rightItem.moveY = event.changedTouches[0].clientY - rightItem.y
      Vue.set(this.item.pictureRight, index, rightItem)
    },
    end: function (rightItem, index, event) {
      const x = event.changedTouches[0].clientX,
        y = event.changedTouches[0].clientY
      rightItem.transition = "all 0.5s"
      rightItem.moveX = 0
      rightItem.moveY = 0
      rightItem.zIndex = 98
      Vue.set(this.item.pictureRight, index, rightItem)
      setTimeout(() => {
        rightItem.transition = "all 0s"
        Vue.set(this.item.pictureRight, index, rightItem)
      }, 500)
      //循环所有拼图 符合坐标则成功
      for (let i = 0, len = this.item.pictureLeft.length; i < len; i++) {
        const ref = 'puzzleLeft' + i,
          minX = this.$refs[ref][0].getBoundingClientRect().left,
          minY = this.$refs[ref][0].getBoundingClientRect().top,
          maxX = minX + this.$refs[ref][0].offsetWidth,
          maxY = minY + this.$refs[ref][0].offsetHeight,
          picture = this.item.pictureLeft[i],
          isCoord = x >= minX && x <= maxX && y >= minY && y <= maxY,
          isTypeNumber = picture.typeNumber === rightItem.typeNumber
        if (isCoord && isTypeNumber) {
          this.sucMusic()
          this.isFalse = false
          picture.isSuc = true
          picture.isFinish = true
          Vue.set(this.item.pictureLeft, i, picture)
          setTimeout(() => {
            this.item.pictureLeft[i].isSuc = false
            Vue.set(this.item.pictureLeft, i, picture)
          }, 1000)
          break
        }
        else {
          this.isFalse = true
        }
      }
          //失败
          if (this.isFalse) {
          this.losMusic()
            if(this.isSeedEntery){
              setTimeout(()=>{this.$emit('nextAssignment')},600)
            } else {
            this.$emit("breakLosTouch")
          }
          this.addAnswer({
            id: this.item.id,
            type: false
        })
        this.isBreakLos = true
        this.updateOperated({questionIndex:this.questionIndex,param:this.index})
      }
      //全部成功则完成任务
      if (this.item.pictureLeft.filter(item => { return !item.isFinish }).length === 0) {
        if(this.isSeedEntery){
          this.setSucLottiePlay()
          setTimeout(()=>{
            this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
          },3000)
        }else {
          this.perfectMusic()
          this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
        }
        this.closePuzzle()
        this.addAnswer({
          id: this.item.id,
          type: true
        })
      }
    },
    ...mapActions("mainStatus", ["setLoading"]),
    ...mapActions("assignmentStatus", ["updateAssignmentFinish", "updateOperated", "setFireworkPlay", "setSucLottiePlay"])
  },
}
</script>

<style scoped lang='stylus'>
.main
  position absolute
  width 100%
  height 100%
  background rgba(0, 0, 0, 0.5)
  z-index 99
  .puzzleMain
    position absolute
    $center('WHLT', 25rem, 14rem)
    z-index 99
  .close
    $coord('WHRT', 1.8rem, 1.8rem, 1rem, 1rem)
    background url($urlTitle + 'list/close.png') 0 0 / 100% 100%
.suc
  animation success 2s ease-in
@keyframes success
  0%
    filter drop-shadow(0px 0px 0rem rgb(254, 172, 81))
  25%
    filter drop-shadow(0px 0px 0.5rem rgb(254, 172, 81))
  50%
    filter drop-shadow(0px 0px 0rem rgb(254, 172, 81))
  75%
    filter drop-shadow(0px 0px 0.5rem rgb(254, 172, 81))
  100%
    filter drop-shadow(0px 0px 0rem rgb(254, 172, 81))
</style>
